<template>
  <div class="maincm">
    <div class="main_spac1" style="padding-bottom: 5px">
      <div class="main_white padding10">
        <div class="main_crumbs boxdq">
          <div class="main_crumbs_l">
            <a href="javascript:;" @click="$router.back(-1)">
              <i class="el-icon-arrow-down"></i>返回
            </a>
            <em>|</em>
            <span>活动图库</span>
          </div>
        </div>
        <div class="main_tree">
          <h3 class="main_tree_h boxdq">
            <span>分类名称</span>
            <span>管理操作</span>
          </h3>
          <div class="main_tree_b">
            <el-tree
              :data="list"
              node-key="id"
              ref="tree"
              v-loading="listLoading"
              element-loading-text="加载中"
              icon-class="el-icon-arrow-right"
              :default-checked-keys="defaultkeys"
              highlight-current
              :props="defaultProps"
              style="min-height: 560px"
            >
              <span
                class="custom-tree-node on"
                slot-scope="{ node, data }"
                @mouseover="data.show = true"
                @mouseleave="data.show = false"
              >
                <span>
                  {{ data.name }}
                </span>
                <span>
                  <el-link
                    type="warning"
                    @click.stop="handleAdd(data)"
                    v-if="node.level == 1"
                    >添加子分类</el-link
                  >
                  <el-link
                    v-if="node.level != 1"
                    type="primary"
                    @click.stop="handleEdit(data)"
                    >编辑</el-link
                  >
                  <el-link
                    type="danger"
                    v-if="node.level != 1"
                    @click="delet(data.id)"
                    >删除</el-link
                  >
                </span>
              </span>
            </el-tree>
          </div>
        </div>

        <!-- <div class="newConBox_p100 paddingBottom10" id="newConBox">
          <div class="newConBox_h32">
            <div :class="['newConBox ', { on: searchBarFixed }]">
              <el-button type="primary" @click="preservation()" v-repeatClick
                >保存排序</el-button
              >
            </div>
          </div>
        </div> -->
      </div>
    </div>

    <el-dialog
      :title="type == 0 ? '添加分类' : type == 1 ? '添加子分类' : '编辑分类'"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="close"
      :visible.sync="addedFormVisible"
      class="main_dialog dialog450"
    >
      <el-form
        :inline="false"
        :model="info"
        :rules="rules"
        class="demo-form-inline"
        ref="userListFrom"
        label-width="90px"
      >
        <el-form-item label="分类名称：" prop="name">
          <el-input
            v-model.trim="info.name"
            placeholder="分类名称"
            clearable
            class="wid300"
            @keyup.enter.native="setupmine"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="(addedFormVisible = false), close()"
          >取 消</el-button
        >
        <el-button type="primary" @click="setupmine" v-repeatClick
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  get_categoryList,
  add_category,
  edit_category,
  delet_category,
} from "@/api/global/globalDataManage";
import rules from "@/rules/global/globalDataMange";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";

export default {
  components: {},
  data() {
    return {
      // 树型tree
      defaultkeys: [],
      defaultProps: {
        children: "selfNext",
        label: "title",
      },
      // 增加和编辑
      info: {
        name: "",
        pid: 0,
      },
      id: "",
      type: 0,
      addedFormVisible: false,
      // 验证
      rules,
      // 列表数据
      list: [],
      listLoading: false,
      // 监听滚动
      searchBarFixed: false,
    };
  },
  mounted() {
    // window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    // window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    // 监听滚动
    handleScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      scrollTop + document.documentElement.clientHeight >
      document.getElementById("newConBox").offsetTop + 200
        ? (this.searchBarFixed = false)
        : (this.searchBarFixed = true);
    },

    // 关闭清空表单
    close() {
      this.info = {
        name: "",
        pid: 0,
      };
      this.$refs["userListFrom"].clearValidate();
    },

    // 删除
    delet(id) {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, { id: id })) +
              apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { id: id }
      );
      this.$confirm("是否删除分类?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delet_category(data).then((res) => {
            if (res.errcode == 0) {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.get_categoryList();
            } else {
              this.$message.error(res.errmsg);
            }
          });
        })
        .catch(() => {});
    },
    // 列表
    get_categoryList() {
      this.listLoading = true;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name
      );
      get_categoryList(data).then((res) => {
        this.listLoading = false;
        console.log(res);
        if (res.errcode == 0) {
          res.data.forEach((e) => {
            e.show = false;
            if (e.selfNext.length != 0) {
              e.selfNext.forEach((p) => {
                p.show = false;
              });
            }
          });
          this.list = res.data;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    handleAdd(data) {
      this.type = 1;
      this.info.pid = data.id;
      this.$nextTick(() => {
        this.addedFormVisible = true;
      });
    },
    handleEdit(data) {
      this.type = 2;
      this.id = "";
      this.info.name = "";
      this.id = data.id;
      this.info.name = data.name;
      this.$nextTick(() => {
        this.addedFormVisible = true;
      });
    },
    // 新增保存
    add() {
      this.addedFormVisible = false;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, this.info)) +
              apiUrl().appsecret
          ),
        },
        apiUrl().name,
        this.info
      );
      add_category(data).then((res) => {
        if (res.errcode == 0) {
          this.$message({
            message: "新增成功",
            type: "success",
          });
          this.get_categoryList();
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 编辑保存
    edit() {
      this.addedFormVisible = false;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(
              Object.assign(apiUrl().name, {
                id: this.id,
                name: this.info.name,
              })
            ) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { id: this.id, name: this.info.name }
      );

      edit_category(data).then((res) => {
        if (res.errcode == 0) {
          this.$message({
            message: "编辑成功",
            type: "success",
          });
          this.get_categoryList();
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 确认
    setupmine() {
      this.$refs["userListFrom"].validate((valid) => {
        if (valid) {
          this.type == 2 ? this.edit() : this.add();
        }
      });
    },
  },
  created() {
    // 列表
    this.get_categoryList();
  },
};
</script>
<style lang="scss" scoped>
.maincm {
  .main_tree {
    .main_tree_h {
      span {
        &:last-child {
          margin-right: 40px;
        }
      }
    }
  }
  .newConBox.on {
    margin-left: -10px;
    padding-left: 10px;
  }
}
</style>
